import React, { Component, PropTypes } from 'react';
import { Row, Col, Collapse, Tooltip } from 'antd';
import { connect } from 'react-redux';
import moment from 'moment';
import 'github-markdown-css';
import ReactMarkdown from 'react-markdown';
import OrderDetail from '../OrderDetail';
import utils from '../../investmentAnalysis/utils';
import Comments from '../../investmentAnalysis/AnalysisReport/comments';
import styles from './analysisReport.less';

const Panel = Collapse.Panel;

const mapStateToProps = ({
  retailFeatureList: { currentDataDate, selectedTrader },
  retailAccountAssets: { specialTradings, educationKeywords, commentConfig, featureRanks },
}) => ({
  detail: selectedTrader,
  dataDate: moment(currentDataDate).format('YYYY-MM-DD'),
  specialTradings,
  educationKeywords,
  commentConfig,
  featureRanks,
});

const mapDispatchToProps = {
  getSpecialTradings: query => ({
    type: 'retailAccountAssets/getSpecialTradings',
    payload: query || {},
  }),
  getCommentConfig: query => ({
    type: 'retailAccountAssets/getCommentConfig',
    payload: query || {},
  }),
  getFeatureRanks: query => ({
    type: 'retailAccountAssets/getFeatureRanks',
    payload: query || {},
  }),
};

@connect(mapStateToProps, mapDispatchToProps)
class AnalysisReport extends Component {
  static propTypes = {
    detail: PropTypes.object.isRequired,
  }
  state = {
    specialTradings: undefined,
  }
  componentDidMount() {
    this.getData(this.props);
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps !== this.props && nextProps.detail !== this.props.detail) {
      this.getData(nextProps);
    }
  }
  getData({ detail: { trader, dataDate }, getSpecialTradings, getCommentConfig, getFeatureRanks }) {
    getSpecialTradings({ trader });
    getCommentConfig();
    getFeatureRanks({ trader, dataDate, featureNameList:['fdtScore'] });
  }
  render() {
    const { detail, specialTradings, educationKeywords, commentConfig, featureRanks } = this.props;
    const fdtFeatures = {};
    for (const k in detail) {
      const value = detail[k];
      fdtFeatures[utils.toSnakeCase(k)] = value;
    }

    const words = [];
    const wordsView = [];
    let allWords = '';
    if (educationKeywords != null) {
      educationKeywords.bool.should.sort((a,b)=>(b.match.content.boost - a.match.content.boost));
      educationKeywords.bool.should.map((item,i)=>{
        words.push(item.match.content.query);
        if(i<5){
          wordsView.push(item.match.content.query);
        }
      })

      allWords = words.join(', ');
    }

    return (
      <div className={styles.analysisReport}>
        { fdtFeatures && !_.isEmpty(commentConfig) && !_.isEmpty(featureRanks) && 
          <Comments features={fdtFeatures} config={commentConfig} special_tradings={specialTradings} feature_ranks={featureRanks} />
        }
        <Row>
          <dl>
            <dt className="markdown-body"><ReactMarkdown source="#### 案例分析:" /></dt>
            <dd>
              <Collapse>
              {specialTradings && specialTradings.map(((item, i) => {
                const { closeOrder, openOrderId, closeOrderId } = item;
                if (closeOrder.closedPositionList === undefined) {
                  return <Panel key={i} />;
                }
                return (
                  <Panel header={item.specialText} key={i}>
                    <strong>{item.specialText}</strong>
                    <OrderDetail data={closeOrder} openOrderId={openOrderId} closeOrderId={closeOrderId} closeOrder={closeOrder} />
                    { i !== specialTradings.length - 1 && <div className="line" />}
                  </Panel>
                );
              }))}
              </Collapse>
            </dd>
          </dl>
        </Row>
        <Row>
          <div className="educationKeywords">
            关键字: {educationKeywords &&
              wordsView.map((item,i)=>{
                return <span key={i} className="tag">{item}{i<wordsView.length-1?',':''}</span>;
              })
            }
          </div>
        </Row>
      </div>
    );
  }
}

export default AnalysisReport;
